<template>
	<ls-page title='优惠券' :autoBack='true'>
		<view class="page-content">
			<view class="exchange-view">
				<view class="h-20"></view>
				<view style="margin: auto; font-size: 36rpx">兑换券详情</view>
				<view class="h-30"></view>
				<!-- 当前业务临时注释 -->
				<!-- <view class="condition-view">
			        <view class="left-lable" >优惠说明</view>
			        <view wx:if="{{ modalInfo.UseCondition == '0' }}" class="right-name" >{{modalInfo.UseConditionName || '无' }}</view>
			        <view wx:if="{{ modalInfo.UseCondition == '1' }}" class="right-name" >台桌可使用{{modalInfo.RoomUseNum || 0 }}张</view>
			        <view wx:if="{{ modalInfo.UseCondition == '2' }}" class="right-name">会员可使用{{modalInfo.MemberUseNum || 0 }}张</view>
			      </view> -->
				<view class="h-20"></view>
				<view class="lable-name-basic">
					<view style="width: 130rpx">有效日期</view>
					<view style="color: #666666; white-space: nowrap">{{ dayjs(modalInfo.StartData).format('YYYY-MM-DD HH:mm') }}-{{ dayjs(modalInfo.EndData).format('YYYY-MM-DD HH:mm')  }}
					</view>
				</view>
				<view class="h-20"></view>
				<!-- <view class="lable-name-basic">
					<view style="width: 130rpx">可用时段</view>
					<view style="color: #666666">全天;</view>
				</view> -->
				<view class="h-20"></view>
				<view class="desc-view">
					<view style="width: 133rpx; line-height: 40rpx; height: 40rpx">使用须知</view>
					<!-- <view class="desc-more">全场可用；1：优惠券不找零、不兑现金、禁止转卖；如用券购买商品后退款，优惠券抵消的金额部分不在退款范围；2：自领券后有效期内使用。</view> -->
					<view class="desc-more" v-html="modalInfo.Remark"></view>
				</view>
<!-- 				<view class="h-20"></view>
				<view class="h-80-c-c"></view> -->
				<view class="" style="display: flex;justify-content: center;">
					<!-- <w-barcode @press="longtap" ref="barcode" :options="ewmoptions"></w-barcode> -->
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;padding-bottom: 20rpx;"></canvas>
				</view>
				<view class="code-view" style="color: #212121">{{ modalInfo.Code }}</view>

				<view class="h-20" style="color: #ffffff"></view>
				<template v-if="shopInfo.isUseTicket">
					        <view class="use-view" style="color: #ffffff" v-if="showBut">
					        	<view class="use-but" @click="onClickUseThrottle">去使用</view>
					        </view>
				</template>
			
			</view>
			<view class="barcode-flex">
				<!-- <w-barcode @press="longtap" ref="barcode" :options="options"  @generate="aleard" @error="handleError"></w-barcode> -->
			</view>
		</view>
		<!-- 使用兑换券 -->
		<x-popup :show="showConfirm" position="center" :closeOnClickOverlay="true" @update:show="showConfirm = $event">
			<view class="" style="width: 620rpx;">
				<view style="color: #666666;padding: 48rpx;font-size: 32rpx;">
					<view class="pop-title">使用兑换券</view>
					<view class="h-20"></view>
					<view style="line-height: 40rpx;">
						使用
						<span style="color: #212121;">{{modalInfo.TicketName}}</span>
						兑换券兑换以下商品：
					</view>
					<view class="h-20"></view>
					<view style="line-height: 40rpx;color: #212121">
						{{modalInfo.GoodsName}}*{{modalInfo.GoodsCount}}
					</view>
					<view class="h-20"></view>
					<view style="line-height: 40rpx;">是否确认使用？</view>
					<view class="h-60"></view>
					<view class="but-view">
						<view class="cancel-but" @click="showConfirm = false">取消</view>
						<view class="confirm-but" @click="onConfirmThrottle">确认</view>
					</view>
				</view>
			</view>

		</x-popup>
		<x-popup :show="selectShow" position="center" :closeOnClickOverlay="true" @update:show="selectShow = $event">
			<view class="" style="width: 620rpx;">
				<view style="color: #666666;padding: 48rpx;font-size: 32rpx;">
					<view class="pop-title">选择商品</view>
					<view class="h-20"></view>
					<view class="select-arr">
						<view class="select-arr-item"  :class="selectActive == k ? 'select' : ''"  v-for="(v,k) in goods" :key="k" @click="selectActive = k">
							<view class="item">
								{{v.goodsName}}
							</view>
						</view>
					</view>
					<view class="h-20"></view>
					<view class="but-view">
						<view class="cancel-but" @click="selectShow = false">取消</view>
						<view class="confirm-but" @click="doSelect">确认</view>
					</view>
				</view>
			</view>
		
		</x-popup>
	</ls-page>
	<package-product ref="testProduct"  @handleAddToCart="handleAddToCart" /> 
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate } from '@/api/public.js'
	import { debounce, _ExtractParamsFromPath, getWeChatJsSDKConfig,calculatePercentPrice } from '@/until/tools.js'
	import wx from "weixin-js-sdk";
	import dayjs from 'dayjs';
	import UQRCode from 'uqrcodejs'; 
	
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const shopInfo = uni.getStorageSync('shopInfo') || {};
	const tableInfo = uni.getStorageSync('tableInfo') || {};
	const cardInfo = uni.getStorageSync('cardInfo') || {};
	const testProduct = ref() // 当前套餐弹窗ref 套餐弹窗
	// 定义响应式数据
	const ewmoptions = ref({
		color: ['#212121'], // 条形码的颜色 默认黑色
		bgColor: 'transparent', // 背景色
		width: 650, // 宽度 单位rpx
		height: 100, // 高度 单位rpx
		// code: '1', // 生成条形码的值
		text: {
			content: '',
			color: ['#212121'],
			position: 'bottom', //bottom
			size: 30,
			padding: 5
		}
	});
	const consumeCode = ref(''); // 响应式变量
	const showConfirm = ref(false); // 控制 modal 显示
	const modalInfo = ref({}); // modal 显示的信息
	const showBut = ref(true); // 控制按钮显示
	const barcode = ref(null);
	const fullUrl = ref(window.location.href)
	const SDKConfig = ref({})
	const address = ref('')
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	onLoad((options) => {
		console.log(options, 'options')
		getGoods()
		if (options.code) {
			HFiveMemberAppObjProcess({
				"functionName": "GetMemberTicketDetails_H5",
				"contentData": {
					"MemberTicketCode": options.code
				}
			}).then(res => {
				modalInfo.value = res
				ewmoptions.value.code = modalInfo.value.Code //条形码生成
				
				// let remark = '1、可用时段:19:00 - 22:00 <br>2、不与其他优惠同享 <br>3、每个ID每天限使用一张<br>4、每桌仅限使用一张<br>5、有效时长40天<br>6、周末 重大节假日不可使用<br>7、不可转桌、拼桌，不可寄存<br>8、和线上团购不可同享';
				let formattedRemark = res.Remark.replace(/<br>/g, '<br />');
				console.log(formattedRemark);
				modalInfo.value.Remark = formattedRemark
				console.log(res, '获取详情数据')
				drawCode(modalInfo.value.Code)
			})
		}

		getWeChatJsSDKConfig().then(resking => {
			SDKConfig.value = resking
		})
	})
	
	const goods = ref([])
	const getGoods = async()=>{
		let goodsArr = []
		let modalGoogs = {"functionName": "getGoodsInfoTerminal_H5", "contentData": {"terminalType":"2","currentTime":''}}
		let resGo = await HFiveMemberAppObjProcess(modalGoogs); 
		goodsArr = resGo
		console.log(goodsArr);
		console.log(modalInfo.value.GoodsCode);
		goods.value = goodsArr.filter(goods =>
		    modalInfo.value.GoodsCode == goods.goodsCode
		);
		console.log(goods.value);
	}
	
	const selectShow = ref(false)
	const selectActive = ref(0) // 选中的商品
	
	const doSelect = ()=>{
		console.log(goods.value[selectActive.value]);
		if(goods.value && goods.value[selectActive.value] && goods.value[selectActive.value].type == '2'){
			selectGood(goods.value[selectActive.value]) // 套餐选择
			selectShow.value = false
		}else{
			uni.showToast({
				title: "该类型兑换券暂不支持，请联系管理员",
				icon: "none"
			});
		}
	}
	
	// 去使用弹窗判断
	const dialogOpen = ()=>{
		if(goods.value && goods.value.length > 1){ // 多个套餐选择(不支持多选套餐和单品)
			selectShow.value = true
		}else if (goods.value && goods.value.length == 1){ // 单个商品
			if(goods.value[0] && goods.value[0].type == '2'){ // 套餐
				selectGood(goods.value[0]) // 套餐选择
			}else if(goods.value[0] && goods.value[0].type == '1'){ // 单品
				showConfirm.value = true
			} 
		}else{ // 默认原本
			// showConfirm.value = true
			uni.showToast({
				title: "商品已下架或沽清，请联系服务员",
				icon: "none"
			});
		}
	}
	
	const drawCode = (code)=>{
		console.log(code);
		// 获取uQRCode实例
		const qr = new UQRCode();
		// 设置二维码内容
		qr.data = code;
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size = 200;
		// 调用制作二维码方法
		qr.make();
		// 获取canvas上下文
		const canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
		// 设置uQRCode实例的canvas上下文
		qr.canvasContext = canvasContext;
		// 调用绘制方法将二维码图案绘制到canvas上
		qr.drawCanvas();
	}
	
	
	onShow((options) => {
		ewmoptions.value.code = modalInfo.value.Code
		
	})


	// 保存条形码图片
	const SaveCode = async () => {
		const res = await barcode.value.GetCodeImg();
		console.log(res);
	};

	// 长按事件回调
	const longtap = (e) => {
		console.log(e);
	};

	const onClickUseThrottle = debounce(function(e) {
		if(couponFlag.value){
			return
		}
		onClickUse()
	}, 800)

	const onConfirmThrottle = debounce(function(e) {
		onConfirm()
	}, 800)
	
	const couponFlag = ref(false)
	const zIndexNum = ref(1) // 当前套餐弹窗与购物车弹窗不同层级切换 
	// 选择商品
	const selectGood = (item)=>{
		console.log(modalInfo.value);
	
		console.log(item);
		item?.priceList.forEach((item)=>{
			item?.detail.forEach((subitem)=>{
				if(subitem.operType === '0' && subitem.choiceType === '1'){
					subitem?.goodsDetail.forEach((vitem)=>{ 
						// 特殊的套餐结构需要补充选中状态，其余类型无需 vitem['check'] = false 
					    vitem['check'] = false 
						// goodsFlavor 调整成正常数据结构 并通过 vitem.goodsFlavor.Name 判断是否已经过滤完
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...1123')
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor)
							console.log('最后1：',vitem.goodsFlavor)
						} 
					})
				}else if(subitem.operType === '0' && subitem.choiceType === '0'){
					subitem?.goodsDetail.forEach((vitem)=>{
						vitem['maxQty'] = subitem.maxQty  // 业务需要控制禁止超过做大下单数量 - 临时控制
						vitem.defaultQty = Number(vitem.defaultQty) 
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...',vitem.goodsFlavor)
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor) 
							console.log('最后2：',vitem.goodsFlavor)
						} 
					})
				} 
				else{
					subitem?.goodsDetail.forEach((vitem)=>{ 
						vitem.defaultQty = Number(vitem.defaultQty) // 此处可以将默认值赋值为0 作为伪清空
						// goodsFlavor 调整成正常数据结构 并通过 vitem.goodsFlavor.Name 判断是否已经过滤完
						if(vitem.goodsFlavor && !vitem?.goodsFlavor[0]?.Name){
							vitem.showFlag = false
							console.log('vitem.goodsFlavor...',vitem.goodsFlavor)
							vitem.goodsFlavor =  filterChaosData(vitem.goodsFlavor) 
							console.log('最后2：',vitem.goodsFlavor)
						} 
					})
				} 
				
			})
		})
		console.log('最后3：',item)
		zIndexNum.value = 1 
		showConfirm.value = false
		nextTick(() => { 
			testProduct.value.initDataProduct(item) 
		})  
	}
	
	// 套餐处理
	const handleAddToCart =  ( recModal ) => {
		console.log('recModal：',recModal)
		let detailListPack = [] // 套餐
		let detailList = [] // 单品 
		let indexStr = 0
		// 先套餐  后单品
		
		if(recModal?.packageOthList?.length > 0){
			// 套餐
			recModal?.packageOthList?.forEach((packitem,packindex)=>{ 
				// if(packindex === 0){ 
					indexStr = packindex + indexStr
					let packBig = {} 
					packBig.itemType = 2  // 1 单品 2 套餐 3 套餐下单品 
					packBig.indexStr =  indexStr
					packBig.fold = "0"
					packBig.orderQty = packitem.qty // item.qty  
					packBig.goodsCode = packitem.goodsCode //
					packBig.goodsPriceCode = recModal.goodsCode //
					packBig.goodsName = packitem.goodsName
					packBig.uomCode = packitem['priceList'][0].uomCode
					packBig.uomName =  packitem['priceList'][0].uomName
					packBig.salePrice = packitem.salePrice 
					packBig.vipPrice = packitem.vipPrice 
					packBig.isUseGold =  packitem.isUseGold 
					packBig.isUseBalance = packitem.isUseBalance
					packBig.saleCoins = packitem.saleCoins 
					packBig.isJoinMinConsume = packitem['priceList'][0].isJoinMinConsume 
					packBig.producePoint = packitem['priceList'][0].producePoint 
					packBig.goodsTypeOrg = packitem.goodsType 
					packBig.flavor = ''  
					packBig.doType = "add"  
					packBig.percentPrice = ''
					packBig.vipPercentPrice = ''
					packBig.attachment = packitem.attachment
					detailListPack.push(packBig)
				// }
				packitem?.['priceList'][0]?.detail.forEach((ditem,dindex)=>{
					ditem?.goodsDetail?.forEach((gitem,gindex)=>{  
						let detailModalPack = {}
					    // 固定套餐 全部都要
					    if(ditem.operType === '1' ){ 
						    detailModalPack.itemType = 3  // 1 单品 2 套餐 3 套餐下单品
						    detailModalPack.indexStr =  indexStr
						    detailModalPack.fold = "0"
						    detailModalPack['orderQty'] = gitem.defaultQty 
						    detailModalPack.vipPrice =  '' 
						    detailModalPack.goodsCode = gitem.goodsCode
						    detailModalPack.goodsPriceCode = recModal.goodsCode
						    detailModalPack.goodsName = gitem.goodsName
						    detailModalPack.uomCode = gitem.uomCode
					        detailModalPack.uomName = gitem.uomName
						    detailModalPack.salePrice = gitem.salePrice  
						    detailModalPack.isUseGold = '' //
						    detailModalPack.saleCoins = '' // packitem.saleCoins 
						    detailModalPack.isJoinMinConsume =  '' //packitem['priceList'][0].isJoinMinConsume 
						    detailModalPack.producePoint = gitem.producePoint 
						    detailModalPack.flavor = ''
						    detailModalPack.doType = "add"  
						    detailModalPack.percentPrice = ''
						    detailModalPack.vipPercentPrice = '' 
						    detailListPack.push(detailModalPack)  
					    }
					    // 可选种类 判断 check: true
					    if(ditem.operType === '0' && ditem.choiceType === '1' && gitem.check){
					 	    detailModalPack.itemType = 3  // 1 单品 2 套餐 3 套餐下单品
					 	    detailModalPack.indexStr =  indexStr
					 	    detailModalPack.fold = "0"
					 	    detailModalPack['orderQty'] = gitem.defaultQty 
					 	    detailModalPack.vipPrice =  '' 
					 	    detailModalPack.goodsCode = gitem.goodsCode
					 	    detailModalPack.goodsPriceCode = recModal.goodsCode
					 	    detailModalPack.goodsName = gitem.goodsName
					 	    detailModalPack.uomCode = gitem.uomCode
					 	    detailModalPack.uomName = gitem.uomName
					 	    detailModalPack.salePrice = gitem.salePrice  
					 	    detailModalPack.isUseGold = '' //
					 	    detailModalPack.saleCoins = '' // packitem.saleCoins 
					 	    detailModalPack.isJoinMinConsume =  '' //packitem['priceList'][0].isJoinMinConsume 
					 	    detailModalPack.producePoint = gitem.producePoint  
					 	    detailModalPack.flavor = ''
					 	    detailModalPack.doType = "add"  
					 	    detailModalPack.percentPrice = ''
					 	    detailModalPack.vipPercentPrice = ''
					 	    detailListPack.push(detailModalPack)  
					    }
					    // 可选商品数量
					    if(ditem.operType === '0' && ditem.choiceType === '0' && gitem.defaultQty > 0){
						    detailModalPack.itemType = 3  // 1 单品 2 套餐 3 套餐下单品
						    detailModalPack.indexStr =  indexStr
						    detailModalPack.fold = "0"
						    detailModalPack['orderQty'] = gitem.defaultQty 
						    detailModalPack.vipPrice =  '' 
						    detailModalPack.goodsCode = gitem.goodsCode
						    detailModalPack.goodsPriceCode = recModal.goodsCode
						    detailModalPack.goodsName = gitem.goodsName
						    detailModalPack.uomCode = gitem.uomCode
						    detailModalPack.uomName = gitem.uomName
						    detailModalPack.salePrice = gitem.salePrice  
						    detailModalPack.isUseGold = '' //
						    detailModalPack.saleCoins = '' // packitem.saleCoins 
						    detailModalPack.isJoinMinConsume =  '' //packitem['priceList'][0].isJoinMinConsume 
						    detailModalPack.producePoint = gitem.producePoint  
						    detailModalPack.flavor = ''
						    detailModalPack.doType = "add"  
						    detailModalPack.percentPrice = ''
						    detailModalPack.vipPercentPrice = ''
						    detailListPack.push(detailModalPack)  
					    }  
				    }) 
				}) 
			}) 
		} 
		
		
		let allDetails = [...detailListPack, ...detailList]
		calculatePercentPrice(allDetails) // 计算套餐比例价格
		console.log('allDetails：',allDetails)
		// packUpdate(recModal)
		onConfirm(allDetails)
	} 
	
	
	
	const onConfirm = (allDetails) => {
		uni.showLoading({
			title: "兑换中，请稍等",
			icon: "none"
		});
		if(couponFlag.value){
			uni.showToast({
				title: "兑换中，请稍等",
				icon: "none"
			});
			return
		}
		couponFlag.value = true
		// 触发 核销兑换券 接口 
		// memberCarCode:会员卡号,memberTicketCode:会员券编号,consumeCode:消费编码 !== 桌号, orgCode:门店编码 
		console.log(cardInfo.code, 'cardInfo')
		let sendForm = {
			"memberCarCode": cardInfo.code,
			"memberTicketCode": modalInfo.value.Code,
			"consumeCode": consumeCode.value,
			"detail" : allDetails ? allDetails : []
		}
		console.log(sendForm, 'sendForm')
		// return
		HFiveMemberAppObjProcess({ "functionName": "UseGoodsTicket_H5", "orgCode": shopInfo.orgCode, "contentData": sendForm })
		.then(res => {
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/order/index',
					})
					couponFlag.value = false
				}, 1200);
				uni.hideLoading()
				showBut.value = false
				showConfirm.value = false
				uni.showToast({
					title: "兑换成功",
					icon: "none"
				});
		})
		.catch(err=>{
			uni.hideLoading()
			couponFlag.value = false
		})
	}

	// 1.首先判断是否存在桌号ROOM_CODE （后端接口判断不能用本地缓存）
	// 2.如果不存在桌号，则需要扫码
	// 3.如果存在桌号>>>则判断是否存在开台或者说是存在消费编号
	// 4.如果存在桌号且开台了，直接进入兑换详情，反之提示请联系服务开台
	// 5.如果存在桌号未开台则提示：请联系服务开台。 
	const onClickUse = (e) => {
		HFiveMemberAppObjProcess({ functionName: "GetCurrentRoom_H5", contentData: "" }).then(storeres => {
			console.log(storeres, '			console.log(storeres)')
			storeres?.currentRoomCode ? hadRoomCode(e, storeres) : scanCodeFun()
		})
		// scanCodeFun()
	}

	// 当前存在桌号 则查询是否已经开台（是否存在消费单号）
	const hadRoomCode = (e, storeres) => {
		HFiveMemberAppObjProcess({
			"functionName": "GetCurrentRoomComsume_H5",
			"contentData": {
				"roomCode": storeres.currentRoomCode
			}
		}).then(consumeres => {
			console.log(consumeres, 'consumeres')
			if (consumeres) {
				tableInfo.consumeCode = consumeres.data
				consumeCode.value = consumeres.data
				dialogOpen()
			} else {
				uni.showToast({
					title: "请联系服务开台",
					icon: "none"
				});
			}
		})
	}

	// ----------------------------------------------------------------------------扫桌码操作-----------------------------------------------------------------------
	const scanCodeFun = () => {
		wx.config({
			debug: false, // 开启调试模式,
			appId: SDKConfig.value.appId, // 必填，企业号的唯一标识
			timestamp: SDKConfig.value.timestamp, // 必填，生成签名的时间戳
			nonceStr: SDKConfig.value.nonceStr, // 必填，生成签名的随机串
			signature: SDKConfig.value.signature, // 必填，签名
			jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
		});
		wx.ready((res) => {
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				success: function(res) {
					// uni.$u.toast(JSON.stringify(res.resultStr))
					console.log(": res", res.resultStr);
					if (res.resultStr) {
						const options = _ExtractParamsFromPath(res.resultStr);
						if (!options.code) {
							uni.showToast({ title: "二维码出错，请联系服务开台", icon: "none" });
							return
						}
						console.log(options.code, 'options.code')
						//以下数据存储字段暂无修改
						shopInfo.orgCode = options.org;
						uni.setStorageSync('shopInfo', shopInfo);
						tableInfo.code = options.code;
						uni.setStorageSync('tableInfo', tableInfo);
						// 通过桌号查询是否已经开台存在消费单号
						HFiveMemberAppObjProcess({
							"functionName": "GetCurrentRoomComsume_H5",
							"contentData": {
								"roomCode": options.code
							}
						}).then(consumeres => {
							if (consumeres.data) {
								tableInfo.consumeCode = consumeres.data
								consumeCode.value = consumeres.data
								// 更新门店信息
								HFiveMemberAppObjProcess({
									functionName: "GetBaseConfigInfo_H5",
									contentData: ""
								}).then((res) => {
									console.log(res, 'saxcasd')
									uni.setStorageSync('shopInfo', res);
									const data = JSON.parse(shopInfo.orgFunctions);

									const obj = data.reduce((acc, curr) => {
										acc[curr.KeyName] = curr.ValueStr;
										return acc;
									}, {});
									console.log(obj, 'obj')
									shopInfo.IsCanOtherRecharge = obj
										.IsCanOtherRecharge;
									shopInfo.IsCanInvoice = obj.IsCanInvoice;
									address.value = res.orgName
									// 更新当前房台 
									HFiveMemberAppObjProcess({
										functionName: "UpdateCurrentRoom_H5",
										contentData: {
											roomCode: options.code
										}
									}).then((resroom) => {
										dialogOpen()
									});
								});
							} else {
								uni.showToast({ title: "请联系服务开台", icon: "none" });
							}
						})
					}
				},
				fail: function(response) {
					uni.showToast({ title: "请扫描正确的二维码", icon: "none" });
				},
			});
		})
	}
</script>

<style lang="less" scoped>
	.page-content {
		width: 100%;
	}

	.barcode-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.exchange-view {
		width: calc(100vw - 96rpx);
		overflow-y: scroll;
		padding:40rpx 48rpx 48rpx;
		color: black;
		font-size: 28rpx;
	}

	.h-20 {
		height: 20rpx;
	}

	.h-30 {
		height: 30rpx;
	}

	.h-60 {
		height: 60rpx;
	}

	.left-lable {
		width: 133rpx;
		line-height: 40rpx;
	}

	.right-name {
		width: calc(100% - 133rpx);
		line-height: 40rpx;
		color: var(--maincolorf2);
	}

	.lable-name-basic {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;

		view:nth-child(1) {
			color: var(--maincolorf4);
		}

		view:nth-child(2) {
			color: var(--maincolorf1) !important;
		}
	}

	.desc-view {
		width: 100%;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;

		view:nth-child(1) {
			color: var(--maincolorf4);
		}

		view:nth-child(2) {
			color: var(--maincolorf1) !important;
		}
	}

	.condition-view {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.desc-more {
		width: calc(100% - 133rpx);
		line-height: 40rpx;
		// height: 160rpx;
		color: var(--maincolorf2);
	}

	.h-80-c-c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
	}

	.code-view {
		width: 654rpx;
		height: 30rpx;
		margin-top: -4rpx;
		display: flex;
		justify-content: space-around;
		color: var(--maincolorf1) !important;
	}

	.use-view {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.use-but {
		line-height: 80rpx;
		text-align: center;
		width: 240rpx;
		height: 80rpx;
		background: var(--dt-backcolorPink);
		border-radius: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: var(--maincolor);
	}

	.cancel-but {
		border: 1rpx solid var(--mainbaccolor24);
		line-height: 80rpx;
		text-align: center;
		width: 240rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: var(--maincolorf2);
	}

	.confirm-but {
		line-height: 80rpx;
		text-align: center;
		width: 240rpx;
		height: 80rpx;
		background: var(--dt-backcolorPink);
		border-radius: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: var(--maincolor);
	}

	.disConfirm {
		position: absolute;
		top: -1000rpx;
		left: 0;
	}

	.showConfirm {
		display: flex;
		flex-direction: row;
		flex-direction: row;
		align-items: center;
		margin-left: 0 auto;
	}

	.pop-title {
		color: black;
		font-size: 36rpx;
		margin: auto;
		text-align: center;
		font-weight: bold;
	}
	.select-arr{
		max-height: 500rpx;
		overflow-y: auto;
		.select-arr-item{
			background: #f7f7f7;
			border-radius: 16rpx;
			padding: 12rpx;
			margin-bottom: 10rpx;
			&.select{
				border: 1rpx solid var(--dt-bordercolorPink);
			}
		}
	}

	.but-view {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	::v-deep .popup-content {
		padding: 0 !important;
	}
</style>